<template>
	<view>
		<view class="bg-white">
			<cu-custom bgColor="bg-gradual-write" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">充值中心</block>
			</cu-custom>
		</view>
		<view class="bg-white margin-lr-lg margin-tb-lg padding-bottom-xs">
			<view class="padding-lr padding-top flex justify-between">
				<view class="text-xl text-bold">
					账户余额
				</view>
				<view class="flex align-center">
					<u-icon name="/other_pages/static/stamps.png" size="30"></u-icon>
					<view class="text-xl text-bold">
						{{balance}}
					</view>
				</view>
			</view>
			<u-divider></u-divider>
			<view class="padding-lr flex justify-start align-center">
				<view class="text-lg">
					充值额度
				</view>
				<view class="text-df">
					(1元人民币=1点)
				</view>
			</view>
			<view class="flex justify-between align-center margin-tb-lg">
				<!-- 500点 -->
				<view class="unactive margin-left-xs" :class="{active:money == 20}" @click="changeMoney(20,0)">
					<view class="flex justify-center align-center">
						<u-icon name="/other_pages/static/stamps.png" size="45"></u-icon>
						<view class="text-xl text-bold">
							<u--text :bold="false" size="24" :color="money==20?'orange':'#868686'" text="20"
								align="center" />
						</view>
					</view>
					<view class="margin-tb-xs">
						<u--text :bold="false" size="24" :color="money==20?'orange':'#868686'" text="￥20.00"
							align="center" />
					</view>
					<view class="item-foot" :class="{footActive:money == 20}">
						<u--text :bold="false" size="20" color="#ffffff" text="赠送0" align="center" />
					</view>
				</view>
				<!-- 1250点 -->
				<view class="unactive margin-lr-xs" :class="{active:money == 80}" @click="changeMoney(80,8)">
					<view class="flex justify-center align-center">
						<u-icon name="/other_pages/static/stamps.png" size="45"></u-icon>
						<view class="text-xl text-bold">
							<u--text :bold="false" size="24" :color="money==80?'orange':'#868686'" text="80"
								align="center" />
						</view>
					</view>
					<view class="margin-tb-xs">
						<u--text :bold="false" size="24" :color="money==80?'orange':'#868686'" text="￥80.00"
							align="center" />
					</view>
					<view class="item-foot" :class="{footActive:money == 80}">
						<u--text :bold="false" size="20" color="#ffffff" text="赠送8" align="center" />
					</view>
				</view>
				<!-- 2500点 -->
				<view class="unactive margin-right-xs" :class="{active:money == 200}" @click="changeMoney(200,40)">
					<view class="flex justify-center align-center">
						<u-icon name="/other_pages/static/stamps.png" size="45"></u-icon>
						<view class="text-xl text-bold">
							<u--text :bold="false" size="24" :color="money==200?'orange':'#868686'" text="200"
								align="center" />
						</view>
					</view>
					<view class="margin-tb-xs">
						<u--text :bold="false" size="24" :color="money==200?'orange':'#868686'" text="￥200.00"
							align="center" />
					</view>
					<view class="item-foot" :class="{footActive:money == 200}">
						<u--text :bold="false" size="20" color="#ffffff" text="赠送40" align="center" />
					</view>
				</view>
			</view>
		</view>

		<view class="margin-lr-lg">
			<u-button v-if="money==0" text="请选择充值额度" :plain="true" color="orange" type="primary" @click="click"></u-button>
			<u-button v-else :text="'确定支付￥'+money+'.00'" color="orange" type="primary" @click="pay"></u-button>
		</view>
		<view class="margin-lr-lg margin-top-lg">
			<view class="text-xl text-black text-bold">温馨提示</view>
			<view class="margin-top-sm text-sm text-grey text-content">
				<p>1.点是自习室平台.上可用于消费的支付凭证，仅限于该平台预约订座和其他服务使用。</p>
				<p>2.点充值成功后，不能退款，提现或转赠他人。如有问题，请联系店铺，或者点击我的-意见反馈进行反馈。</p>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toast,
		showConfirm,
		tansParams
	} from '@/utils/common'
	import {
		createBalanceOrder
	} from '@/api/sr/balance'
	export default {
		data() {
			return {
				money: 0.00,
				give: 0
			}
		},
		computed: {
			balance() {
				return this.$store.state.user.balance
			}
		},
		methods: {
			changeMoney(money, give) {
				this.money = money
				this.give = give
			},
			click() {
				uni.showToast({
					title: "请选择充值额度",
					icon: 'none'
				})
			},
			async pay() {
				console.log(this.money)
				console.log(this.give)
				const that = this
				const params = {
					amountTotal: 0.01,
					description: "账户余额充值: " + this.money + '-赠送:' + this.give,
					rechargeTotal: this.money + this.give
				}
				createBalanceOrder(params).then(res => {
					console.log(res)
					let data = res.data;
					if(data == null){
						that.$store.dispatch('getMineBalance');
						uni.navigateTo({
							url: "/other_pages/recharge/account"
						})
					}else{
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.packageValue,
							paySign: data.paySign,
							signType: data.signType,
							success(resPay) {
								console.log('成功支付-------', resPay)
								uni.showToast({
									icon: 'success'
								}, 2000)
							},
							fail(resPay) {
								console.log('支付失败-------', resPay)
								uni.showToast({
									icon: 'error',
									title: "失败"
								}, 2000)
							},
							complete(resPay) {
								console.log('最终回调--------', resPay)
								that.$store.dispatch('getMineBalance');
								uni.navigateTo({
									url: "/other_pages/recharge/account"
								})
							}
						})
					}
				}).catch((err) => {
					toast(err)
				});
			},
		}
	}
</script>

<style lang="scss">
	.unactive {
		border-radius: 10rpx;
		border: 3rpx solid #e1e1e1;
		width: 300rpx;
		padding-top: 10rpx;
	}

	.active {
		border: 3rpx solid orange;
		background-color: #ff7b7b10;
	}

	.item-foot {
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		background-color: #e1e1e1;
	}

	.footActive {
		background-color: orange;
	}
</style>